<template>
    <div class="warp">
          <div class="drop-down-menu">
              <div class="drop-down">
                  下拉菜单
              </div>
            <ul>
              <li><a href="#">子菜单1</a></li>
              <li><a href="#">子菜单1</a></li>
              <li><a href="#">子菜单1</a></li>
              <li><a href="#">子菜单1</a></li>
              <li><a href="#">子菜单1</a></li>
            </ul>
          </div>
      <div class="tianchong">

      </div>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        name: "Menu"
      }
    }
  }
</script>

<style scoped>
  .warp {
    width: 1080px;
    text-align: center;
  }

  .tianchong {
    width: 200px;
    height: 50px;
    margin: 0 auto;
    background-color: #6f7180;
  }
  .drop-down-menu{
    position: relative;
    display: inline-block;
    width: 150px;
    text-align: center;
  }
  .drop-down{
    background-color: #67C23A;
    height: 30px;
    cursor: pointer;
    width: 150px;
  }
  .drop-down-menu ul{
    list-style: none;
    width: 150px;
    background-color: #F2F6FC;
    margin: 0;
    padding: 0;
    box-shadow: 0 4px 8px 4px #bcbcbc;
    position: absolute;
    z-index: 1;
    display: none;
  }
  li a{
    text-decoration: none;
    color: black;
    display: block;
    height: 30px;
  }
  .drop-down-menu:hover ul{
    display: block;
  }
  li a:hover{
    background-color: #606266;
    color: white;
  }
</style>
